import React, { Component } from 'react';
import axios from 'axios';
import { Layout,Breadcrumb ,Typography,Divider,Row, Col,Input ,TreeSelect , DatePicker, Space, Button } from 'antd';
import './index.css';
import moment from 'moment';
const dateFormat = 'YYYY/MM/DD';
const { Title } = Typography;
const {Content } = Layout;
const { TreeNode } = TreeSelect;
const { TextArea } = Input;
export default class index extends Component {
         state = {
              name:'',
              department_id: undefined,
              username:'',
              password:'123456',
              position_id:undefined,
              phone:'',
              birthday:'',
              address:'',
              introduction: '',
              department:[],
              position:[]
            };
            async componentWillMount(){
             let department =await axios({
                url:'http://localhost:3000/department',
                method:'get'
              })
              let position =await axios({
                url:'http://localhost:3000/position',
                method:'get'
              })
              this.setState({department,position})
            };
            
      
        changValue(ev,key){
          this.setState({
              [key]:ev.target.value
          });
       };
       

      onChangeDepartment = department_id => {
        console.log(department_id);
        this.setState({ department_id });
      };
      onChangePosition = position_id => {
        console.log(position_id);
        this.setState({ position_id });
      };
      onChangeBirthday=(date, dateString)=> {
        console.log(date,dateString);
        this.setState({ birthday:dateString });
      }
      addDoctor=()=>{
        console.log(this.state)
      }
    render() {
        return (
            <Layout className="layout">
            <Content style={{ padding: '0 50px' }}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>Home</Breadcrumb.Item>
                <Breadcrumb.Item>List</Breadcrumb.Item>
                <Breadcrumb.Item>App</Breadcrumb.Item>
              </Breadcrumb>
              <div className="site-layout-content">
              <Title level={3}>添加医生信息</Title>
              <Divider />
              <Row gutter={[0, 16]}>
                <Col span={12}>
                    <Title level={5}>医生姓名</Title>
                    <Input placeholder="姓名" style={{ width: '80%' }} size='large' allowClear="true" value={this.state.name} onChange={(ev)=>this.changValue(ev,"name")} />
                </Col>
                <Col span={12}>
                    <Title level={5}>科室</Title>
                    <TreeSelect
                        showSearch
                        style={{ width: '80%' }}
                        value={this.state.department_id}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="科室"
                        allowClear
                        treeDefaultExpandAll
                        onChange={this.onChangeDepartment}
                        size='large'
                    >
                        <TreeNode value="aaa" title="呼吸内科"></TreeNode>
                        <TreeNode value="消化内科" title="消化内科"></TreeNode>
                        <TreeNode value="泌尿内科" title="泌尿内科"></TreeNode>
                        <TreeNode value="心内科" title="心内科"></TreeNode>
                        <TreeNode value="血液科" title="血液科"></TreeNode>
                        <TreeNode value="内分泌科" title="内分泌科"></TreeNode>
                        <TreeNode value="神经内科" title="神经内科"></TreeNode>
                        <TreeNode value="儿科" title="儿科"></TreeNode>
                        <TreeNode value="感染科" title="普外科"></TreeNode>
                        <TreeNode value="普外科" title="普外科"></TreeNode>
                        <TreeNode value="骨科" title="骨科"></TreeNode>
                        <TreeNode value="妇科" title="妇科"></TreeNode>
                        <TreeNode value="产科" title="产科"></TreeNode>
                        <TreeNode value="神经外科" title="神经外科"></TreeNode>
                        <TreeNode value="肝胆外科" title="肝胆外科"></TreeNode>
                    </TreeSelect>
                </Col>
              </Row>
              <Row gutter={[0, 16]}>
                <Col span={12}>
                    <Title level={5}>用户名</Title>
                    <Input placeholder="用户名" style={{ width: '80%' }} size='large' allowClear="true" value={this.state.username} onChange={(ev)=>this.changValue(ev,"username")} />
                </Col>
                <Col span={12}>
                    <Title level={5}>初始密码</Title>
                    <Input value='123456' style={{ width: '80%' }} disabled size='large' value={this.state.password} onChange={(ev)=>this.changValue(ev,"password")} />
                </Col>
              </Row>
              <Row gutter={[0, 16]}>
                <Col span={12}>
                    <Title level={5}>职位</Title>
                    <TreeSelect
                        showSearch
                        style={{ width: '80%' }}
                        value={this.state.position_id}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="职位"
                        allowClear
                        treeDefaultExpandAll
                        onChange={this.onChangePosition}
                        size='large'
                    >
                         <TreeNode value="医生" title="医生">
                        </TreeNode>
                        <TreeNode value="主治医生" title="主治医生">
                        </TreeNode>
                        <TreeNode value="科室主任" title="科室主任">
                        </TreeNode>
                        <TreeNode value="副院长" title="副院长">
                        </TreeNode>
                    </TreeSelect>
                </Col>
                <Col span={12}>
                    <Title level={5}>手机号</Title>
                    <Input placeholder="手机号" style={{ width: '80%' }} size='large' allowClear="true" value={this.state.phone} onChange={(ev)=>this.changValue(ev,"phone")} />
                </Col>
              </Row>
              <Row gutter={[0, 16]}>
                <Col span={12}>
                    <Title level={5}>生日</Title>
                    <Space direction="vertical" style={{ width: '80%' }} size='large' >
                    <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} onChange={this.onChangeBirthday} style={{ width: '100%' }} size='large' />
                    </Space>
                </Col>
                <Col span={12}>
                    <Title level={5}>住址</Title>
                    <Input placeholder="住址" style={{ width: '80%' }} size='large' allowClear="true" value={this.state.address} onChange={(ev)=>this.changValue(ev,"address")} />
                </Col>
              </Row>
              <Row gutter={[0, 16]}>
                <Col span={24}>
                    <Title level={5}>简介</Title>
                    <TextArea
                        value={this.state.introduction}
                        onChange={(ev)=>this.changValue(ev,"introduction")}
                        placeholder="个人简介"
                        autoSize={{ minRows: 3, maxRows: 5 }}
                        style={{ width: '90%' }} 
                        size='large'
                        allowClear="true"
                    />
                </Col>
              </Row>
              <Row gutter={[0, 16]}>
                <Col span={6} offset={9}>
                    <Button type="primary" size='large' onClick={()=>this.addDoctor()} block>添加</Button>
                </Col>
              </Row>
             </div>
            </Content>
          </Layout>
        )
    }
}
